<template>
  <div class="cinema-detail-container">
    <Header></Header>
    <Films
      v-if="currentFilmList.length > 0"
      :list="currentFilmList"
      v-model="currentFilmId"
      @onchangeFilm="onChangeFilmId"
    >
    </Films>
    <Filter :data="timeList"></Filter>
    <div class="list-container" v-if="arrangementList.length && !loading">
      <Item
        v-for="(item, index) in arrangementList"
        :info="item"
        :key="index"
      ></Item>
    </div>
    <template v-if="arrangementList.length === 0 && loading">
      <div style="padding: 0 15px">
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
        <nut-skeleton
          :style="{ width: '100%', margin: '0.5rem 0' }"
          width="100%"
          height="15px"
          title
          animated
          row="1"
        >
        </nut-skeleton>
      </div>
    </template>
    <template v-if="arrangementList.length === 0 && !loading">
      <nut-empty description="暂无场次"></nut-empty>
    </template>
  </div>
</template>
<script setup>
import Header from "./header/index.vue";
import Films from "./films.vue";
import Filter from "./filter.vue";
import { ref, onMounted } from "vue";
import Item from "./item.vue";
const currentFilmId = ref("1202195654135386112");
const timeList = ref(["2024-04-02", "2024-04-03", "2024-04-04"]);
const loading = ref(true);

const arrangementList = ref([
  {
    finishTime: "1712049840000",
    hallName: "4号厅/动画片儿童需购票",
    id: "1223957865623855116",
    pickUpPrice: 3680,
    price: 3800,
    showTime: "1712042100000",
  },
]);
const currentFilmList = ref([
  {
    cast: "贾玲,雷佳音,张小斐,杨紫,沙溢,乔杉,李雪琴,马丽,魏翔,赵海燕,张琪,沈春阳,沈涛,许君聪,卜钰,朱天福,刘宏禄",
    createTime: "1706667379678",
    dataChannel: 3,
    director: "贾玲",
    duration: 0,
    filmCode: "",
    filmName: "热辣滚烫",
    filmType: "喜剧,剧情",
    id: "1202195654135386112",
    image:
      "https://gw.alicdn.com/i1/O1CN010a6vEZ1yTEdaJncJ7_!!6000000006579-0-alipicbeacon.jpg_480x480Q30s150.jpg",
    intro:
      "自甘堕落的乐莹每天宅在父母家中，因与妹妹发生矛盾，遂离开家寻求独立生活。在经历了种种波折和伤害后，慢慢发觉，拳击这项运动貌似能给她的人生带来些许变化…",
    language: "汉语普通话",
    onlineState: 1,
    publishTime: "2024-02-10 00:00:00",
    score: "",
    updateTime: "1706667379678",
    versionType: "IMAX 2D",
    videoTitle: "暂无",
    videoUrl: "暂无",
  },
  {
    cast: "沈腾,范丞丞,尹正,张本煜,孙艺洲,魏翔,贾冰,郑恺",
    createTime: "1706667379678",
    dataChannel: 3,
    director: "韩寒",
    duration: 0,
    filmCode: "",
    filmName: "飞驰人生2",
    filmType: "喜剧,剧情",
    id: "1202195654202494976",
    image:
      "https://gw.alicdn.com/i3/O1CN01VnfCqh25qmJADe1vR_!!6000000007578-0-alipicbeacon.jpg_480x480Q30s150.jpg",
    intro: "五年，三万六千遍",
    language: "汉语普通话",
    onlineState: 1,
    publishTime: "2024-02-10 00:00:00",
    score: "",
    updateTime: "1706667379678",
    versionType: "IMAX 2D",
    videoTitle: "暂无",
    videoUrl: "暂无",
  },
]);
const onChangeFilmId = (id) => {
  currentFilmId.value = id;
};
onMounted(() => {
  loading.value = false;
});
</script>
<style lang="scss">
.cinema-detail-container {
  .list-container {
    padding: 0 25px;

    .cinema-detail-item-container {
      .nut-cell {
        margin-bottom: 0;
      }
    }

    .cinema-detail-item-container:nth-last-child(1) {
      .nut-cell {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
